<template>
<el-dialog title="档案借阅" :visible.sync="visible" width="500px" append-to-body :close-on-click-modal="false">
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-divider content-position="left">档案信息</el-divider>
    <el-form-item label="案卷号" prop="fileCode">
      <el-input v-model="descriptionData.fileCode" readonly />
    </el-form-item>
    <el-form-item label="提名" prop="title">
      <el-input v-model="descriptionData.title" readonly />
    </el-form-item>
    <el-divider content-position="left">借阅信息</el-divider>
    <el-form-item label="借阅类型" prop="returnTime">
      <AmDictSelector v-model="form.billType" dict="borrow_bill_type" />
    </el-form-item>
<!--    <el-form-item v-if="form.billType === 'borrow'" :label="`借阅时间`" prop="borrowTime">-->
<!--      <el-date-picker clearable-->
<!--                      v-model="form.borrowTime"-->
<!--                      type="date"-->
<!--                      value-format="yyyy-MM-dd"-->
<!--                      placeholder="请选择借阅时间"-->
<!--                      class="am-w-full"/>-->
<!--    </el-form-item>-->
    <el-form-item :label="`借出周期`" prop="returnTime">
      <el-date-picker
          v-model="formTemp.timeRange"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="am-w-full"
          @change="handleRangeChange" />
    </el-form-item>
    <el-form-item :label="`用途`" prop="reason">
      <el-input v-model="form.reason" type="textarea" :rows="5" placeholder="请输入内容"/>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit('0')">保 存</el-button>
    <el-button type="primary" @click="submit('1')">保存并提交</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>
</template>

<script>
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import AmDictSelector from "../../../components/AmComp/AmDictSelector.vue";
import {getDescription} from "../../../api/am/description";
import {getAmBorrow, updateAmBorrow, addAmBorrow} from "../../../api/am/amBorrow";

dayjs.extend(duration)

export default {
  components: {AmDictSelector},
  data() {
    return {
      title: '',
      visible: false,
      isEdit: false,
      formTemp: {
        timeRange: []
      },
      form: {
        id: '',
        descId: '',
        billType: 'borrow',
        borrowTime: '',
        returnTime: '',
        reason: '',
        remark: '',
        days: 0,
        status: '0',
      },
      rules: {},
      descriptionData: {}
    }
  },
  methods: {
    handleRangeChange() {
      this.form.borrowTime = dayjs(this.formTemp.timeRange[0]).format('YYYY-MM-DD');
      this.form.returnTime = dayjs(this.formTemp.timeRange[1]).format('YYYY-MM-DD');
      const duration = dayjs.duration(dayjs(this.form.returnTime).diff(dayjs(this.form.borrowTime)))
      this.form.days = duration.as('days');
    },
    open(rowData, isEdit = false) {
      if(isEdit) {
        this.isEdit = isEdit
        getAmBorrow(rowData.id).then(resBorrow => {
          getDescription(resBorrow.data.descId).then(response => {
            this.descriptionData = response.data
            Object.keys(this.form).forEach(key => {
              this.form[key] = resBorrow.data[key]
            })
            console.log(this.form);
            this.formTemp.timeRange = [this.form.borrowTime, this.form.returnTime]
          })
        })
      } else {
        this.descriptionData = rowData
      }
      this.visible = true
    },
    submit(status) {
      this.form.status = status
      this.form.descId = this.descriptionData.id;
      const tip = `借阅申请${this.form.status === '0' ? '保存' : '提交'}成功`
      if(this.isEdit) {
        updateAmBorrow(this.form).then(response => {
          this.$modal.msgSuccess(tip);
          this.$emit('success');
          this.cancel();
        })
      } else {
        addAmBorrow(this.form).then(response => {
          this.$modal.msgSuccess(tip);
          this.$emit('success');
          this.cancel();
        })
      }
    },
    cancel() {
      this.visible = false;
    },
  }
}
</script>

<style lang="scss"></style>
